import QtQuick 1.0


Item
{
    id: listItem
    property real detailsOpacity : 0
    property bool showLeftItem:false
    width: listViewManager.width
    //height: (topLayout.height+5)<40? 40:topLayout.height +5
    height:40


    //edit descript of current list
    function editDescriptList()
    {

        idDescriptonText.visible = false;
        idDescriptionInput.visible = true;
        idDescriptionInput.focus =true
        idDescriptionInput.focusInput =  true
        idDescriptionInput.forceActiveFocus()
    }

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            //complete list of items
            listModelTaDaList.completeToDoModel(index)
            listItem.state = 'Details';
        }
    }

    Rectangle
    {
        id: background
        x: 2; y: 2; width: parent.width - x*2
        height: parent.height - y*2 //(topLayout.height - y*2)<40 ? 40: (topLayout.height - y*2)
        color: "ivory"
        border.color: "#acbbdb"
        radius: 5


        //this item show items from selected list
        Item
        {
            id: details
            x: 10; width: parent.width - 20
            y:idTextMyList.height
            //anchors { top: topLayout.bottom; topMargin: topLayout.height } // bottom: parent.bottom; bottomMargin: 10 }


            opacity: listItem.detailsOpacity
            //list for tada list - contain name of lists

            FocusScope
            {
                id:idFocusScope
                // column with list of  unchecked items, "add item" button,
                // list of cheked items
                Column
                {
                        y:60
                        // list with unchecked items
                        spacing:20
                        Rectangle
                        {
                            width: listItem.width-20
                            height: 150
                            y:10
                            color:"ivory"
                            clip:true
                            ListView
                            {
                                id: toDoListUnCheckedItems
                                //y: 20
                                anchors.fill:parent
                                model:listToDoModelUnChecked                                
                                delegate: ListToDoDelegate{}
                                //interactive: parent.activeFocus
                                ScrollBar {
                                        flickable: toDoListUnCheckedItems
                                        vertical: true
                                    }


                            }
                        }

                        // list with checked items
                        Rectangle
                        {
                            width:listItem.width-20
                            height: 150
                            color: "ivory"
                            anchors.top:parent.top
                            anchors.topMargin: idColumnAddItem.y+idColumnAddItem.height+20
                            clip:true
                            ListView
                            {
                                id: toDoListCheckedItems
                                anchors.fill:parent
                                model:listToDoModelChecked
                                delegate: ListToDoDelegate{}
                                ScrollBar {
                                        flickable: toDoListCheckedItems
                                        vertical: true
                                    }
                            }
                        }

                        //add new item
                        Column
                        {
                            id:idColumnAddItem
                            anchors.top:parent.top
                            anchors.topMargin: toDoListUnCheckedItems.y+ toDoListUnCheckedItems.height
                            TextButton
                            {
                                id:addItemButon
                                //y: 30
                                //y:toDoListUnCheckedItems.x//+ toDoListUnCheckedItems.height +10
                                opacity: listItem.detailsOpacity
                                backgroundImage:"images/plus.png"
                                backgroundImageWidth:20
                                colorGradientTo: "#acbbdb"
                                text: "Add Item"
                                onClicked:
                                {
                                    addItemButon.visible = false
                                    idColumnForAddItem.visible = true
                                    idColumnForAddItem.focus =  true
                                    idTextInputNewItem.text =""
                                    idTextInputNewItem.cursorVisible= true
                                    idTextInputNewItem.focus=  true
                                    idTextInputNewItem.forceActiveFocus();

                                }
                            }

                            //text input for add item
                            Column
                            {
                                id:idColumnForAddItem
                                spacing:10
                                visible:false
                                Rectangle
                                {
                                    id:idRectangleNewItem
                                    border.color: "#acbbdb"
                                    color: "#ffffff"
                                    radius: 3
                                    width: idTextInputNewItem.width + idTextInputNewItem.x
                                    height: idTextInputNewItem.height + idTextInputNewItem.y
                                    TextEdit
                                    {
                                        id: idTextInputNewItem
                                        x: 5
                                        y: 3
                                        wrapMode:TextEdit.WordWrap
                                        width: listItem.width-20
                                        height: 30
                                    }
                                }
                                Row
                                {
                                    spacing:10
                                    /*
                                      add new item
                                    */
                                    TextButton
                                    {
                                        id: idCreateNewItem
                                        opacity: listItem.detailsOpacity
                                        text: "Add this item"
                                        backgroundImage:"images/plus.png"
                                        backgroundImageWidth:20
                                        colorGradientTo: "#acbbdb"
                                        onClicked:
                                        {
                                            if(idTextInputNewItem.text != "")
                                            {
                                                listToDoModelUnChecked.numberItems =  listToDoModelUnChecked.numberItems+1
                                                listToDoModelUnChecked.addItem(idTextInputNewItem.text ,
                                                                               listToDoModelUnChecked.numberItems,
                                                                               "toDoListUnCheckedItems"
                                                                              )
                                                //items.append(listToDoModelUnChecked.get(listToDoModelUnChecked.count-1))

                                                listModelTaDaList.addToItems(index, listToDoModelUnChecked.get(listToDoModelUnChecked.count()-1))
                                                idColumnForAddItem.visible = false
                                                addItemButon.visible = true;
                                            }
                                        }
                                     }

                                    /*
                                      cancel new item
                                    */
                                    TextButton
                                    {
                                        id: idCancelNewItem
                                        opacity: listItem.detailsOpacity
                                        text: "Close"
                                        colorGradientTo: "#acbbdb"
                                        textColor:"red"
                                        onClicked:
                                        {
                                            idColumnForAddItem.visible = false
                                            addItemButon.visible = true;
                                        }
                                      }
                                }

                          }

                      }

                    }


                //list description
                Column
                {
                    //text description
                    TextButton
                    {
                        id:idDescriptonText
                        text: description
                        radius: 0
                        visible:false
                        font.pointSize: 9
                        colorGradientTo: "ivory"
                        colorGradientFrom: "ivory"
                        onClicked:
                                editDescriptList();
                    }

                    //text imput for edit description
                    TextInputArea
                    {
                        id:idDescriptionInput
                        height:30
                        width: listItem.width-topLayout.x-5
                        textButtonAccept:"Save description"
                        textButtonCancel:"Cancel"
                        visible:false
                        maximumLength:200
                        onAccept:
                        {
                             listModelTaDaList.updateData(index, "description",idDescriptionInput.text )
                             idDescriptionInput.visible = false;
                             idDescriptonText.visible = (description!=""? true:false);
                             if(idDescriptionInput.text != "")
                                 idAddDescriptionList.visible = false
                             else
                                 idAddDescriptionList.visible = true
                        }
                        onCancel:
                        {
                            idDescriptionInput.visible = false;
                            idDescriptonText.visible = (description!=""? true:false);
                            if(idDescriptionInput.text != "")
                                idAddDescriptionList.visible = false
                            else
                                idAddDescriptionList.visible = true
                        }

                    }


                   }

            }

            //item for message box
           MessageBox
           {
             id: idMessageBox
             anchors { left: parent.left; right: parent.right; top: parent.top; topMargin: idMain.height/2 }
             state:  "normal"
             onAccept:
             {
                 listModelTaDaList.deleteList(index)
                 state ="normal"
                 idMain.enabled = true
                 idMain.seeMyLists = true
             }
             onCancel:
             {
                 state = "normal"
                 idMain.seeMyLists = true
                 idMain.enabled = true
             }
           }

        }


        /*this row have items who describe a list:
                - bullet: your size describe items left from list
                - title of list
                - add description button (if don't have a description)
                - delete button: delete current list
                - undo button: this make undo deletion of items deleted

         */
        Row
        {

            id: topLayout
            x: 10; y: 0; height: idTextMyList.height; width: parent.width
    //            spacing: 1
            /*move: Transition {
                         NumberAnimation { properties: "x"; easing.type: Easing.OutBounce }
                     }
             add: Transition {
                 NumberAnimation { properties: "x"; easing.type: Easing.OutQuad }
             }
             */

           Image
            {
                id: listItemImage
                //scale: (listToDoModelUnChecked.count * 0.02) + 1//: (listToDoModelUnChecked.count * 0.1)
                scale:listModelTaDaList.sizeOfBullet(index)
                source: "images/bullet.png"
            }

            //list title
            Text
            {
                id:idTextMyList
                text: "<font color=\" "+
                                        (listItem.GridView.isCurrentItem ?  "black" : "blue")
                                        +" \" face=\"arial\" size=\"12\"> <b>" +
                        title
                      +
                      "</b> </font>"
                      + "<font color=\"grey\" face=\"arial\" size=\"4\"> <i>" +
                         ( (listModelTaDaList.getLeftItems(index)>0 && showLeftItem) ?( "_ " + listModelTaDaList.getLeftItems(index)+" left" ): "")+
                        "</i> </font>"


                wrapMode: Text.WordWrap                
                width:idRowEditList.x-10                
                //color: listItem.GridView.isCurrentItem ?  "black" : "blue"
            }

            /*
                 buttons for add si delete list
            */
            Row
            {
                id: idRowEditList
                x: parent.width -  idAddDescriptionList.width - idUndoDeletion.width - idDeletethisList.width
                y:6
                visible:false
                spacing:5
                anchors { right: parent.right; rightMargin:15}

                //button for add description
                TextButton
                {
                    id:idAddDescriptionList
                    text: 'Add description'
                    backgroundImage:"images/plus.png"
                    backgroundImageWidth:20
                    colorGradientTo: "#acbbdb"
                    onClicked:
                    {
                       //listModelTaDaList.setProperty(index, "description", "Complete description here")
                       //visible = false;
                        editDescriptList()
                    }
                }

                //undo button
                TextButton
                {
                    id:idUndoDeletion
                    text: 'Undo'
                    backgroundImage:"images/redo.png"
                    backgroundImageWidth:20
                    colorGradientTo: "#acbbdb"
                    onClicked:
                        if(listUndoDeletion.count()>0)
                        {
                            console.log("parent="+listUndoDeletion.get(listUndoDeletion.count()-1).parentList)
                            if(listUndoDeletion.getParentList(listUndoDeletion.count()-1) == "toDoListUnCheckedItems")
                                listToDoModelChecked.moveToList(listUndoDeletion.count()-1,"undoList", "unCheckedList")
                            else
                                listToDoModelChecked.moveToList(listUndoDeletion.count()-1,"undoList", "checkedList")
                        }
                }

                // button for delete this list
               TextButton
                {
                    id:idDeletethisList
                    text: 'Delete this list'
                    backgroundImage:"images/minus.png"
                    backgroundImageWidth:20
                    colorGradientTo: "#acbbdb"
                    onClicked:
                        {

                            idMain.enabled = false;
                            idMessageBox.enabled = true;
                            idMessageBox.boxHeight = 5
                            idMessageBox.boxWidth = 50
                            idMessageBox.text = "Are you sure to delete this list?"
                            idMessageBox.state = "hideForeground"
                        }
                }

            }


        }


   }



    states:
    [
        State {
            name: "Details"
            PropertyChanges { target: listItem; detailsOpacity: 1; x: 0 } // Make details visible
            PropertyChanges { target: idMain; seeMyLists: false } // Make details visible

            PropertyChanges {target: addItemButon ;  visible:true}
            PropertyChanges {target: idRowEditList ;  visible:true}
            // Move the list so that this item is at the top.
            PropertyChanges { target: listItem.ListView.view; contentY: listItem.y }
            PropertyChanges { target: listItem; height: listViewManager.height } // Fill the entire list area with the detailed view

            PropertyChanges { target: listItem.ListView.view; interactive: false }
            PropertyChanges {target: idDescriptonText ;  visible: (description!="" ? true:false )}

            PropertyChanges {target: idColumnForAddItem ;  visible:false}

            PropertyChanges {target: listItemImage ;  visible:false}
            PropertyChanges {target: listItem ;  showLeftItem:false}
            PropertyChanges {target: idTextMyList ;  color:"black"}

        },
        State {
                name: "Default"
                when: idMain.seeMyLists
                //StateChangeScript{name: "updateItems"; script: listModelTaDaList.updateItemsFromToDoModel(index)}
                //listModelTaDaList.updateItemsFromToDoModel(index)
                PropertyChanges {target: idDescriptonText ;  visible:false}
                PropertyChanges {target: listItemImage ;  visible:true}
                PropertyChanges {target: listItem ;  showLeftItem:true}
                PropertyChanges {target: idRowEditList ;  visible:false}
                PropertyChanges {target: idTextMyList ;  color:"blue"}
                PropertyChanges {target: background ;  height: (topLayout.height - background.y*2)<40? 40: (topLayout.height - background.y*2)}
            }
    ]

    transitions: Transition
    {
        // Make the state changes smooth
        ParallelAnimation {
            ColorAnimation { property: "color"; duration: 500 }
            NumberAnimation { duration: 10; properties: "detailsOpacity,x,contentY,height,width" }
        }
    }


}


